<template>
    <div class="adpos-list">
        <Form :model="formItem" ref="formItem" :inline="true" action="javascript:void(0)">
            <FormItem>
                <Input v-model="formItem.key" placeholder="输入关键词查找"></Input>
            </FormItem>
            <FormItem>
                <Button type="primary" @click="renderTable()">查找</Button>
            </FormItem>
        </Form>
        <div class="action-btn">
            <Button size="small" @click="removeMultiple()" style="margin-right: 8px" type="error">批量删除</Button>
            <Button size="small" @click="showModal()" type="success">添加广告位</Button>
        </div>
        <Table border ref="adposList" :columns="tableColumn" :data="dataList" :loading="dataLoading" @on-selection-change="changeData($event)">
            <template #is_mobile="{ row }">
                <Tag color="green" v-if="row.is_mobile == 1">手机</Tag>
                <Tag color="blue" v-if="row.is_mobile == 0">电脑</Tag>
            </template>
            <template #action="{ row, index }">
                <Button type="info" size="small" style="margin-right: 5px;float:left" @click="showEdit(row.id)">编辑</Button>
                <Button type="error" size="small" @click="removeDetail(index,row.id)">删除</Button>
            </template>
        </Table>
        <!-- 分页 -->
        <div class="table-page">
            <Page size="small" ref="listPage" :total="pages.total" :model-value="pages.current" :page-size="pages.size" show-elevator show-total @on-change="changePage"></Page>
        </div>
        <!-- 需要全屏时添加这句 :mask="false" class-name="idw100" -->
        <Drawer :closable="false" :mask-closable="false" :scrollable="true" title="详情" width="640" v-model="showModalStatus">
            <Spin size="large" fix v-if="loading"></Spin>
            <Form :model="detailInfo" ref="adposValidate" label-position="right" :label-width="80" :rules="adposValidate" action="javascript:void(0)">
                <FormItem label="名称" prop="name">
                    <Input v-model="detailInfo.name" placeholder="输入名称"></Input>
                </FormItem>
                <FormItem label="手机">
                    <i-switch :true-value="1" :false-value="0" v-model="detailInfo.is_mobile">
                        <template #open>是</template>
                        <template #close>否</template>
                    </i-switch>
                </FormItem>
                <FormItem>
                    <Button style="margin-right: 8px" @click="showModalStatus = false">取消</Button>
                    <Button type="primary" @click="handleSubmit('adposValidate')">提交</Button>
                </FormItem>
            </Form>
        </Drawer>
    </div>
    </template>
    
    <script>
    export default {
        name: 'AdPos',
        data() {
            return {
                detail_id:0,
                loading: false,
                dataLoading: true,
                formItem: {
                    'key': ''
                },
                pages: {
                    current: 1,
                    total: 0,
                    size: 10
                },
                tableColumn: [
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center',
                    },
                    {
                        title: 'Id',
                        key: 'id',
                        width: 60,
                    },
                    {
                        title: '名称',
                        minWidth: 300,
                        key: 'name',
                    },
                    {
                        title: '类型',
                        slot: 'is_mobile',
                        width: 90
                    },
                    {
                        title: '操作',
                        slot: 'action',
                        width: 130,
                    }
                ],
                dataList: [],
                detailInfo: {
                    name: '',
                    is_mobile: 0,
                },
                showModalStatus: false,
                adposValidate: {
                    name: [
                        { required: true, message: '名称必须填写', trigger: 'blur' }
                    ]
                },
                selectData: []
            }
        },
        created() {
            // 取数据
            this.getTableList();
        },
        methods: {
            changePage() {
                this.pages.current = this.$refs['listPage'].currentPage;
                this.getTableList();
            },
            getTableList() {
                var params = this.formItem;
                params.size = this.pages.size;
                params.page = this.pages.current;
                this.dataLoading = true;
                this.$api.adpos.list(params).then(res => {
                    this.dataList = res.result.list;
                    this.pages.total = res.result.count
                }).finally(e=>{
                    this.dataLoading = false;
                });
            },
            renderTable() {
                this.pages.currentPage = 1;
                this.getTableList();
            },
            changeData(index) {
                this.selectData = index
            },
            showModal() {
                this.showModalStatus = !this.showModalStatus;
                this.detailInfo = {
                    name:'',
                    is_mobile:0,
                };
                this.detail_id = 0;
            },
            handleSubmit(name) {
                this.$refs[name].validate((valid) => {
                    this.loading = true;
                    if (valid) {
                        if (this.detail_id == 0) {
                            this.$api.adpos.create(this.detailInfo).then(res => {
                                this.getTableList();
                                this.showModalStatus = !this.showModalStatus;
                            }).finally(res => {
                                this.loading = false;
                            });
                        } else {
                            this.detailInfo.detail_id = this.detail_id;
                            this.$api.adpos.update(this.detailInfo).then(res => {
                                this.getTableList();
                                this.showModalStatus = !this.showModalStatus;
                            }).finally(res => {
                                this.loading = false;
                            });
                        }
                    } else {
                        this.$Message.error('请检查输入的信息是否正确');
                        this.loading = false
                    }
                })
            },
            showEdit(id){
                this.detail_id = id;
                this.loading = true;
                this.$api.adpos.detail({detail_id:id}).then(res => {
                    this.detailInfo = res.result
                }).finally(e=>{
                    this.loading = false;
                })
                this.showModalStatus = !this.showModalStatus;
            },
            removeDetail(index, id) {
                this.$Modal.confirm({
                    title: '警告',
                    content: '<p>此操作不可恢复，三思而后行</p>',
                    onOk: () => {
                        this.$api.adpos.remove({ detail_id: [id] }).then(res => {
                            this.dataList.splice(index, 1);
                        });
                    }
                });
            },
            removeMultiple() {
                this.$Modal.confirm({
                    title: '警告',
                    content: '<p>此操作不可恢复，三思而后行</p>',
                    onOk: () => {
                        var ids = [];
                        this.selectData.forEach((item) => {
                            ids.push(item.id);
                        })
                        this.$api.adpos.remove({ detail_id: ids }).then(res => {
                            this.getTableList();
                        });
                    }
                });
            },
        }
    }
    </script>
    